$(function () {
  const laypage = layui.laypage
  const form = layui.form
  const data = {
    pagenum: 1,
    pagesize: 3,
  }

  // 一、获取用户列表

  // 1.1 发送请求获取列表
  function loadList(params) {
    $.ajax({
      type: "get",
      url: "admin/users",
      data: params,
      success(res) {
        // console.log(res)
        // 1.2 渲染页面
        const html = template("table-tpl", res)
        $("tbody").html(html)

        if (res.status === 1) {
          // console.log(1)
          data.pagenum--
          loadList(data)
          return false
        }

        // 1.3 分页功能
        laypage.render({
          elem: "articlePage", // 注意，这里的 test1 是 ID，不用加 # 号
          count: res.total, // 数据总数，从服务端得到
          curr: params.pagenum, // 当前页
          limit: data.pagesize, // 每页条数
          limits: [3, 5, 7, 10], // 每页条数选择项
          layout: ["prev", "page", "next", "skip", "count", "limit"], // 分页条布局效果
          jump: function (obj, first) {
            // obj包含了当前分页的所有参数，比如：
            // console.log(obj.curr) // 得到当前页，以便向服务端请求对应页的数据。
            // console.log(obj.limit) // 得到每页显示的条数

            data.pagenum = obj.curr
            data.pagesize = obj.limit
            //首次不执行
            if (!first) {
              //do something
              loadList(data)
            }
          },
        })
      },
    })
  }

  loadList(data)

  // 1.2 删除功能
  $("tbody").on("click", ".layui-btn-danger", function () {
    // 1.2.1 获取id
    const id = $(this).attr("data-id")
    // console.log(id)
    // 1.2.2 根据id删除对应的数据
    layer.confirm("确实要删除吗？", function (index) {
      $.ajax({
        type: "DELETE",
        url: `admin/users/${id}`,
        success(res) {
          // console.log(res)
          if (res.status == 0) {
            layer.msg("删除成功", {
              icon: 1,
              time: 1000, //2秒关闭（如果不配置，默认是3秒）
            })
            layer.close(index)
            loadList(data)
          }
        },
      })
    })
  })

  // 1.3 重置密码功能
  $("tbody").on("click", ".layui-btn-normal", function () {
    const id = $(this).attr("data-id")
    // console.log(id)
    // 1.3.1 生成模版
    const html = $("#repwd-form-tpl").html()
    // console.log(html)

    // 1.3.2 弹出层
    const index = layer.open({
      type: 1,
      content: html,
      title: "重置密码",
      area: ["500px", "250px"],
    })

    // 1.3.3 注册表单提交事件
    $("#repwd-form").on("submit", function (e) {
      // (1)阻止默认跳转
      e.preventDefault()
      // (2)获取用户输入的值
      const pwd = $("#repwd-form .repwd").val()
      console.log(pwd)
      console.log($(".conpwd").val())

      // (3)验证密码是否一致
      form.verify({
        same(value) {
          if (value != pwd) {
            return "两次密码不一致"
          }
        },
      })

      // console.log(pwd)
      // (4)发送请求
      $.ajax({
        type: "put",
        url: `admin/users/${id}`,
        data: {
          password: pwd,
        },
        success(res) {
          // console.log(res)
          if (res.status === 0) {
            layer.msg("重置成功", {
              icon: 1,
              time: 1000, //2秒关闭（如果不配置，默认是3秒）
            })
            layer.close(index)
          }
        },
      })
    })
  })

  // 1.4 编辑功能
})
